(function () {
  function fileToBase64(blob, callback) {
    var reader = new FileReader()
    reader.onload = function (result) {
      typeof callback === 'function' && callback(result.target.result)
    }
    reader.readAsDataURL(blob)
  }

  /**
   * 校验文件类型、文件大小 符合配置规则的话 就插入到编辑器中
   * @param editor 编辑器实例
   * @param file 文件对象
   * @param callback 回调函数，默认是插入到编辑器中，如果传入回调函数，则自定义处理
   */
  function validateAndInsert(editor, file, callback) {
    const config = {
      size: 2 * 1000 * 1000,
      accept: ['jpg', 'jpeg', 'png'],
      ...(editor.options.imageConfig || {})
    }

    if (file.size > (config.size)) {
      return
    }
    if (!config.accept.find(type => file.type.includes(type))) {
      return
    }
    fileToBase64(file, (data) => {
      if (typeof callback === 'function') {
        callback(data)
      } else {
        editor.setImageContent(data)
      }
    })
  }

  UE.registerUI(
    "linknew",
    function (editor, uiName) {
      let contentEl; // 内容区元素
      editor.setOpt("allowLinkProtocols", [
        "http:",
        "https:",
        "#",
        "/",
        "ftp:",
        "mailto:",
        "tel:",
      ]);
      let allowLinkProtocols = editor.getOpt("allowLinkProtocols");
      let range, link, url, titleEl, rangeLink, orgText, hrefEl, msgEl;
      const lang = editor.getLang("link");
      const $G = function (id) {
        return contentEl.querySelector(`#${id}`);
      };

      //创建dialog
      const dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
        content: `
       <ul class="bh-insert-link">
       <li>
          <label for="href"  id="hrefLabel"></label>
          <input id="insertLinkOfHref" type="text" />
        </li>
        <li>
          <label for="href" id="titleLabel"></label>
          <input id="insertLinkOfTitle" type="text" />
        </li>
        <span id="errorMsg" style="font-size: 12px;"></span>
      </ul>`,
        //需要指定当前的编辑器实例
        editor: editor,
        //指定dialog的名字
        name: uiName,
        //dialog的标题
        title: "插入链接",

        //指定dialog的外围样式
        cssRules: "width:420px;height:150px;",

        //如果给出了buttons就代表dialog有确定和取消
        buttons: [
          {
            className: "edui-okbutton",
            label: "确定",
            onclick: function () {
              var href = hrefEl.value.replace(/^\s+|\s+$/g, "");
              if (href) {
                if (!hrefStartWith(href, allowLinkProtocols)) {
                  href = "http://" + href;
                }
                var obj = {
                  href: href,
                  target: "_blank",
                  title: titleEl.value.replace(/^\s+|\s+$/g, ""),
                  _href: href,
                };

                if (orgText && titleEl.value != orgText) {
                  link[UE.browser.ie ? "innerText" : "textContent"] =
                    obj.textValue = titleEl.value;
                  range.selectNode(link).select();
                }
                if (range.collapsed) {
                  obj.textValue = titleEl.value;
                }
                editor.execCommand("link", obj);
                dialog.close();
              }
              dialog.close(true);
            },
          },
          {
            className: "edui-cancelbutton",
            label: "取消",
            onclick: function () {
              dialog.close(false);
            },
          },
        ],
      });
      //参考addCustomizeButton.js
      var btn = new UE.ui.Button({
        name: "link",
        title: "插入链接",
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        onclick: function () {
          //渲染dialog
          dialog.render();
          dialog.open();
          init();
        },
      });

      // 初始化逻辑
      function init() {
        //让其选中文本高亮
        editor.selection.getRange().select();
        //高亮后，才能获取到选中文本，当选中字失去焦点的情况下是获取不到的选中文本的
        const selectText = editor.selection.getText();
        contentEl = document.querySelector(".bh-insert-link");

        range = editor.selection.getRange();
        link = range.collapsed
          ? editor.queryCommandValue("link")
          : editor.selection.getStart();
        titleEl = $G("insertLinkOfTitle");
        hrefEl = $G("insertLinkOfHref");
        msgEl = $G("errorMsg");
        $G("titleLabel").textContent = lang["static"]["lang_input_text"];
        $G("hrefLabel").textContent = lang["static"]["lang_input_url"];
        rangeLink = domUtils.findParentByTagName(
          range.getCommonAncestor(),
          "a",
          true
        );
        link = domUtils.findParentByTagName(link, "a", true);

        // console.log(range.collapsed) 没选择文本为true 选择了为false
        if (link) {
          url = UE.utils.html(
            link.getAttribute("_href") || link.getAttribute("href", 2)
          );
          if (rangeLink === link && !link.getElementsByTagName("img").length) {
            titleEl.removeAttribute("disabled");
            orgText = titleEl.value =
              link[UE.browser.ie ? "innerText" : "textContent"];
          } else {
            titleEl.setAttribute("disabled", "true");
            titleEl.value = selectText;
          }
        } else {
          if (range.collapsed) {
            titleEl.removeAttribute("disabled");
            titleEl.value = "";
          } else {
            titleEl.setAttribute("disabled", "true");
            titleEl.value = selectText;
          }
        }
        hrefEl.value = url ? url : "";

        hrefEl.onblur = function () {
          if (!hrefStartWith(this.value, allowLinkProtocols)) {
            msgEl.innerHTML =
              "<span style='color: red'>" + lang.httpPrompt + "</span>";
          } else {
            msgEl.innerHTML = "";
          }
        };
      }

      function hrefStartWith(href, arr) {
        href = href.replace(/^\s+|\s+$/g, "");
        for (var i = 0, ai; (ai = arr[i++]); ) {
          if (href.indexOf(ai) == 0) {
            return true;
          }
        }
        return false;
      }
      return btn;
    },
    30
  );
// , 0/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/

  UE.registerUI(
    "emojinew",
    function (editor, uiName) {
      let parent, imgDetail;
      const getElIndex = (el) => {
        const elParent = el.parentElement;
        return [...elParent.querySelectorAll("td")].findIndex(
          (child) => child === el
        );
      };
      // 初始化渲染
      function initRender() {
        parent = document.querySelector(".emoji-wrapper");
        imgDetail = parent.querySelector(".show-image-detail");
        if (emojiList) {
          const htmls = [];
          emojiList.forEach((src, index) => {
            if (index % 10 === 0) {
              htmls.push("<tr>");
            }
            htmls.push(`<td><img src="${src}" alt=""></td>`);
            if ((index + 1) % 10 === 0) {
              htmls.push("</tr>");
            }
          });
          parent.querySelector("table").innerHTML = htmls.join("");
          bindEvent();
        }
      }
      // 绑定事件
      function bindEvent() {
        parent.querySelectorAll("td").forEach((element) => {
          element.addEventListener("mouseenter", (e) => {
            const el = e.target;
            const index = getElIndex(el);
            const img = el.querySelector("img");
            imgDetail.style.display = "flex";
            if (img) {
              const src = img.getAttribute("src");
              imgDetail.innerHTML = `<img src="${src}"/>`;
              index < 5
                ? imgDetail.classList.remove("pos-left")
                : imgDetail.classList.add("pos-left");
            }
          });
        });
        parent.querySelector("table").addEventListener("mouseleave", function () {
          imgDetail.style.display = "none";
        });

        parent.querySelectorAll("table td").forEach((el) => {
          el.addEventListener("click", function () {
            const imgEl = el.querySelector("img");
            if (imgEl) {
              const src = imgEl.getAttribute("src");
              editor.setImageContent(src);
              popup.hide();
            }
          });
        });
      }

      const renderHtml = () => {
        return `<div class="emoji-wrapper" style="width: 311px;">
              <table>
              </table>   
              <div class="show-image-detail"></div>
          </div>`;
      };

      const popup = new UE.ui.Popup({
        //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
        content: renderHtml(),
        //需要指定当前的编辑器实例
        editor: editor,
        //指定dialog的名字
      });

      //参考addCustomizeButton.js
      var btn = new UE.ui.Button({
        name: "emotion",
        title: "插入链接",
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        onclick: function () {
          popup.showAnchor(this.target);
          initRender();
        },
      });

      return btn;
    },
    31
  );
// , 0/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/

  UE.registerUI(
    "insertimage1",
    function (editor) {
      const config = {
        size: 2 * 1000 * 1000,
        accept: ['jpg', 'jpeg', 'png'],
        ...(editor.options.imageConfig || {})
      }
      var btn = new UE.ui.Button({
        name: "insertimage",
        title: "批量上传",
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        onclick: function () {
          init();
        },
      });

      // 初始化逻辑
      function init() {
        const input = document.createElement('input')
        input.type = 'file'
        input.multiple = true
        input.accept= config.accept.map(item => `.${item}`).join(',')
        input.addEventListener('change', function (){
          Array.from(input.files).forEach(file => {
            validateAndInsert(editor, file)
          })
        })

        input.click()
      }

      return btn;
    },
    32
  );
// , 0/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/

  UE.registerUI(
    "insertimage2",
    function (editor, uiName) {
      const config = {
        size: 2 * 1000 * 1000,
        accept: ['jpg', 'jpeg', 'png'],
        ...(editor.options.imageConfig || {})
      }

      //创建dialog
      const dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
        content: `
          <div class="bh-editor-upload-content">
                  <div class="bh-editor-image-upload-wrapper">
                      <span>选择文件</span>    
                      <input type="text" readonly>
                      <label class="upload-input">
                          浏览
                          <input type="file" id="bhEditorUpload">
                      </label>
                  </div>
                  <div class="bh-editor-image-preview">
                       <span>图片预览区域</span>
                  </div>
          </div>

       `,
        //需要指定当前的编辑器实例
        editor: editor,
        //指定dialog的名字
        name: uiName,
        //dialog的标题
        title: "本地上传",

        //指定dialog的外围样式
        cssRules: "width:500px;",

        //如果给出了buttons就代表dialog有确定和取消
        buttons: [
          {
            className: "edui-okbutton",
            label: "确定",
            onclick: function () {
              const uploadBtn = document.querySelector('#bhEditorUpload')
              const imgFile = uploadBtn.files[0]
              if (imgFile) {
                validateAndInsert(editor, imgFile)
                dialog.close(false);
              }
            },
          },
          {
            className: "edui-cancelbutton",
            label: "取消",
            onclick: function () {
              dialog.close(false);
            },
          },
        ],
      });

      var btn = new UE.ui.Button({
        name: "simpleupload",
        title: "单张上传",
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        onclick: function () {
          dialog.render();
          dialog.open();
          init();
        },
      });

      // 初始化逻辑
      function init() {
        const uploadBtn = document.querySelector('#bhEditorUpload')
        uploadBtn.accept= config.accept.map(item => `.${item}`).join(',')
        uploadBtn.addEventListener('change', function (){
          const imgFile = uploadBtn.files[0]
          if (imgFile) {
            validateAndInsert(editor, imgFile, (data) => {
              document.querySelector('.bh-editor-image-upload-wrapper > input').value = imgFile.name
              document.querySelector('.bh-editor-image-preview').innerHTML = `<img src="${data}"/>`
            })
          }
        })

      }

      return btn;
    },
    33
  );
// , 0/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/

})()
